<template>
    <div class="roomitem">
        <img :src="RoomItem.picture_url" alt="图片出错了" class="picture">
        <div class="desc1" :style="{color:textcolor}">{{RoomItem.verify_info.messages.join(" ")}}</div>
        <div class="desc2">{{ RoomItem.name }}</div>
        <div class="price" :style="{color:textcolor}">{{ RoomItem.price_format }}</div>
        <div class="desc3">{{ RoomItem.bottom_info.content }}</div>
    </div>
</template>
<script setup>
//接收房子的信息
const props = defineProps({
   RoomItem: {
        type: Object,
        default:{}
    }
})

//计算属性
import {computed} from 'vue'
const textcolor = computed(() => {
    return props.RoomItem.verify_info.text_color;
}) 
</script>
<style scoped lang="less">
 .roomitem
 {
    width: 33%;
    margin-bottom: 20px;
    padding-right:10px;
    box-sizing: border-box;
    .picture
    {
        width: 100%;
    }

    .desc1
    {
        font-size: 12px;
    }

    .desc2
    {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
    }
 }
</style>